<template>
    <div>
        <InnerBreadcrumb v-model="indexKey" :path="breadPath" :showBack="true" />
        <!--学生申报课题-->
        <div class="edu-page-warp" v-show="indexKey == '1'">
            <condition-card @reset="reset" @search="onSubmit" label-width="120px">
                <slot>
                    <el-row :gutter="20">
                        <el-col :span="8">
                            <el-form-item label="毕业年份">
                                <el-date-picker
                                    class="dateclass"
                                    v-model="queryForm.condition.grade"
                                    value-format="yyyy"
                                    type="year"
                                    placeholder="默认当前年份"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </slot>
            </condition-card>
            <el-card shadow="never">
                <div class="edu-page-title">申请课题变更</div>
                <el-table :data="topicList" size="mini" style="width:100%" tooltip-effect="light">
                    <el-table-column prop="grade" label="年份" fixed="left" min-width="50">
                        <template slot-scope="scope">{{ scope.row.grade }}</template>
                    </el-table-column>
                  <el-table-column prop="projectName" label="学生" fixed="left" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.studentId ? `${scope.row.studentName}(${scope.row.studentId})` : '' }}</template>
                  </el-table-column>
                    <el-table-column prop="projectName" label="课题名称" min-width="160" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.projectName }}</template>
                    </el-table-column>
                  <el-table-column prop="projectName" label="副标题" min-width="100" show-overflow-tooltip>
                    <template slot-scope="scope">{{ scope.row.subTitleName }}</template>
                  </el-table-column>
                    <el-table-column prop="projectType" label="课题类型" min-width="60" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.projectType }}</template>
                    </el-table-column>
                    <el-table-column prop="subjectSource" label="课题来源" min-width="60" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.subjectSource }}</template>
                    </el-table-column>
                    <el-table-column prop="subjectProperties" label="课题性质" min-width="60" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.subjectProperties }}</template>
                    </el-table-column>
                    <el-table-column prop="createTime" label="申报时间"  min-width="80" show-overflow-tooltip>
                        <template slot-scope="scope">{{scope.row.createTime}}</template>
                    </el-table-column>
                    <el-table-column label="审核状态" prop="status" show-overflow-tooltip min-width="60">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status === 'WaitCommit'" type="info">草稿</el-tag>
                            <el-tag v-else-if="scope.row.status === 'Process'" type="info">待审核</el-tag>
                            <el-tag v-else-if="scope.row.status === 'Reject'" type="danger">已驳回</el-tag>
                            <el-tag v-else-if="scope.row.status === 'End'" type="success">已通过</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column :label="$t('label.operation')" fixed="right" min-width="60">
                        <template slot-scope="scope">
                            <el-button
                                v-if="scope.row.status === 'WaitCommit' || scope.row.status === 'Reject' || scope.row.status === 'End'"
                                type="text"
                                size="mini"
                                @click="updateRecord(scope.row.id, scope.row.applicationType,scope.row.grade)"
                            >申请变更</el-button>
                            <el-button
                                v-if="scope.row.status === 'Process' || scope.row.status === 'End'"
                                type="text"
                                size="mini"
                                @click="viewDetail(scope.row.id, scope.row.applicationType,scope.row.grade)"
                            >{{$t("message.detail")}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="edu-pagination">
                    <div class="float-right">
                        <el-pagination
                            :current-page="queryForm.pageNum_"
                            :page-sizes="[20,50,100,500,1000]"
                            :page-size="queryForm.pageSize_"
                            :total="queryForm.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            style="float: right;margin:10px 60px 0 0;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </el-card>
        </div>
        <!-- 学生课题申请变更 -->
        <div v-show="indexKey == 2">
            <el-form
                :model="studentTopicForm"
                ref="studentTopicForm"
                label-width="170px"
                :rules="declareTopicRules"
                label-position="right"
                label-suffix="："
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课题名称" prop="projectName">
                            <el-input
                                v-model="studentTopicForm.projectName"
                                maxlength="100"
                                class="topic-input-select"
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="副标题" prop="subtitleName">
                            <el-input
                                v-model="studentTopicForm.subtitleName"
                                maxlength="100"
                                class="topic-input-select"
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课题来源" prop="projectSourceId">
                            <el-select
                                v-model="studentTopicForm.projectSourceId"
                                clearable
                                filterable
                                placeholder="请选择"
                                class="topic-input-select"
                            >
                                <el-option
                                    v-for="item in source.subjectSourceOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课题性质" prop="projectNatureId">
                            <el-select
                                v-model="studentTopicForm.projectNatureId"
                                clearable
                                filterable
                                placeholder="请选择"
                                class="topic-input-select"
                            >
                                <el-option
                                    v-for="item in source.subjectNatureOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="课题类别" prop="projectType">
                            <el-select
                                v-model="studentTopicForm.projectType"
                                clearable
                                filterable
                                placeholder="请选择"
                                class="topic-input-select"
                            >
                                <el-option
                                    v-for="item in source.subjectTypeOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="毕业设计（论文）地点" prop="designPlace">
                            <el-input
                                v-model="studentTopicForm.designPlace"
                                placeholder="请输入"
                                maxlength="60"
                                class="topic-input-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="其中社会实践情况" prop="practiceSocialId">
                            <el-select
                                v-model="studentTopicForm.practiceSocialId"
                                clearable
                                filterable
                                placeholder="请选择"
                                class="topic-input-select"
                            >
                                <el-option
                                    v-for="item in source.socialPracticeOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="研究方向" prop="researchDirection">
                            <el-input
                                v-model="studentTopicForm.researchDirection"
                                type="textarea"
                                :rows="4"
                                maxlength="200"
                                show-word-limit
                                placeholder="请输入"
                                class="topic-input-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="课题简介" prop="introductionProject">
                            <el-input
                                v-model="studentTopicForm.introductionProject"
                                type="textarea"
                                :rows="4"
                                maxlength="200"
                                show-word-limit
                                placeholder="请输入"
                                class="topic-input-select"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="指导老师" prop="teacherNum">
                            <el-select
                                v-model="studentTopicForm.teacherNum"
                                clearable
                                filterable
                                placeholder="请选择"
                                class="topic-input-select"
                            >
                                <el-option
                                    v-for="item in source.innerTutorOptions"
                                    :key="item.value"
                                    :value="item.value"
                                    :label="item.label"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="buttons" class="float-right">
                <el-button @click="declareCancel">取消</el-button>
                <el-button type="primary" @click="studentSubmit">提交</el-button>
            </div>
        </div>
        <div v-if="indexKey == 4">
            <TopicInfo
                ref="topicInfo"
                :basicInfoForm="declareTopicForm"
                :basicInfoFormHis="declareTopicFormHis"
                @topic-submit="declareSubmit"
                @topic-cancel="declareCancel"
            ></TopicInfo>
        </div>
        <div v-if="indexKey == 3">
            <TopicStuDetail
                ref="topicStuDetail"
                :actionType="actionType"
                :basicInfoForm="declareDetailForm"
                @topic-cancel="declareCancel"
            ></TopicStuDetail>
        </div>
        <div v-if="indexKey == 5">
            <TopicTeacherDetail
                ref="topicTeacherDetail"
                :actionType="actionType"
                :basicInfoForm="declareDetailForm"
                @topic-cancel="declareCancel"
            ></TopicTeacherDetail>
        </div>
    </div>
</template>
<script>
import { getList, addData, detail } from 'common/src/api/underGraduationDesign/topicChange'
import API from 'common/src/api/underGraduationDesign/stuDeclareSubject'
import TutorApi from 'common/src/api/underGraduationDesign/tutorDeclareSubject'

export default {
    name: 'topicChange',
    data() {
        return {
            api: API,
            queryForm: {
                condition: {
                    grade: null
                },
                pageNum_: 1,
                pageSize_: 20
            },
            studentTopicForm: {},
            studentTopicFormHis:{},
            declareTopicForm: {},
            declareTopicFormHis:{},
            declareDetailForm: {},
            topicList: [],
            topicData: null,
            indexKey: '1',
            breadPath: {
                label: '申请课题变更',
                key: '1',
                children: [
                    {
                        key: '2',
                        label: '申请变更'
                    },
                    {
                        key: '3',
                        label: '查看课题变更'
                    },
                    {
                        key: '4',
                        label: '申请变更'
                    },
                    {
                        key: '5',
                        label: '查看课题变更'
                    }
                ]
            },
            source: {
                subjectSourceOptions: [], // 课题来源
                subjectNatureOptions: [], // 课题性质
                subjectTypeOptions: [
                    {
                        // 课题类别
                        label: '毕业论文',
                        value: '毕业论文'
                    },
                    {
                        label: '毕业设计',
                        value: '毕业设计'
                    }
                ],
                socialPracticeOptions: [], //其中社会时间情况
                innerTutorOptions: []
            },
            declareTopicRules: {
                projectName: [{ required: true, message: '请输入', trigger: 'blur' }],
                projectSourceId: [{ required: true, message: '请选择', trigger: 'change' }],
                projectNatureId: [{ required: true, message: '请选择', trigger: 'change' }],
                projectType: [{ required: true, message: '请选择', trigger: 'change' }],
                designPlace: [{ required: true, message: '请输入', trigger: 'blur' }],
                practiceSocialId: [{ required: true, message: '请选择', trigger: 'change' }],
                researchDirection: [{ required: true, message: '请输入', trigger: 'blur' }],
                teacherNum: [{ required: true, message: '请选择', trigger: 'change' }]
            },
            actionType: '',
            progressData: [] //审核进度列表
        }
    },
    mounted() {
        this.queryForm.condition.grade = new Date().getFullYear() + ''
        this.onSubmit()
    },
    methods: {
        changeKey(data) {
            this.indexKey = data
        },
        onSubmit() {
            getList(this.queryForm).then(res => {
                if (res.code === 200) {
                    this.topicList = res.data.list
                    this.queryForm.total = res.data.total
                }
            })
        },
        reset() {
            this.queryForm.condition.grade = null
            this.onSubmit()
        },
        updateRecord(id, type,grade) {
            detail(id, type).then(({data})=>{
                console.log("detail",data);
                if (type ==1) {
                    this.studentTopicForm = data.applicationStudentEntity;
                    this.studentTopicFormHis = data.applicationStudentHis;
                    this.studentTopicForm.grade = grade ? grade + '' : '';
                    this.topicData = data.applicationStudentHis;
                    this.indexKey = 2;
                } else {
                    this.declareTopicForm = data.applicationTeacherEntity;
                    this.declareTopicFormHis = data.applicationTeacherHis;
                    this.declareTopicForm.grade = grade ? grade + '' : '';
                    this.topicData = data.applicationTeacherHis;
                    this.indexKey = 4;
                }
            })
            this.actionType = "EDIT"
            if (type == 1) {
                this.getInnerTutorInfo()
                this.getSubjectSource()
                this.getSubjectNature()
                this.getSocialPractice()
            }
        },
        viewDetail(id, type, grade) {
            detail(id, type).then(res=>{
                if (type ==1) {
                    this.declareDetailForm = res.data;
                } else {
                    this.declareDetailForm = res.data;
                }
            })
            this.actionType = "VIEW"
            if (type == 1) {
                this.indexKey = 3
            } else {
                this.indexKey = 5;
            }
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.onSubmit()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.onSubmit()
        },
        // 查校内导师
        getInnerTutorInfo() {
            const params = {
                pageNum_: 0,
                pageSize_: 1000
            }
            this.api
                .getInnerTutor(params)
                .then(res => {
                    this.source.innerTutorOptions = this.optionFormat(res.data, 'name', 'code')
                })
                .catch()
        },
        // 查课题来源
        getSubjectSource() {
            const params = {
                year: this.studentTopicForm.grade
            }
            this.api
                .getSource(params)
                .then(res => {
                    this.source.subjectSourceOptions = this.optionFormat(
                        res.data,
                        'subjectSource',
                        'id'
                    )
                })
                .catch()
        },
        // 查课题性质
        getSubjectNature() {
            const params = {
                year: this.studentTopicForm.grade
            }
            this.api
                .getNature(params)
                .then(res => {
                    this.source.subjectNatureOptions = this.optionFormat(
                        res.data,
                        'subjectProperties',
                        'id'
                    )
                })
                .catch()
        },
        // 查社会实践
        getSocialPractice() {
            const params = {
                year: this.studentTopicForm.grade
            }
            this.api
                .getPractice(params)
                .then(res => {
                    this.source.socialPracticeOptions = this.optionFormat(
                        res.data,
                        'sociaPractice',
                        'id'
                    )
                })
                .catch()
        },
        // 下拉框选项数据 格式化
        optionFormat(optionList = [], label = '', value = '') {
            const dataset = []
            for (let i = 0; i < optionList.length; i++) {
                const optionObj = {
                    label: optionList[i][label],
                    value: optionList[i][value]
                }
                dataset.push(optionObj)
            }
            return dataset
        },
        // 提交
        declareSubmit(data) {
            //data.proId = data.id;
            this.$refs.topicInfo.$refs['basicInfoForm'].validate(valid => {
                if (valid) {
                    data.id = this.topicData.id;
                    if(this.declareTopicFormHis.id){
                      this.declareTopicFormHis.proId=this.declareTopicFormHis.id;
                    }
                    var submitData = {
                        applicationTeacherHis: data,
                        applicationTeacherEntity:this.declareTopicFormHis
                    };
                    addData(submitData).then(res => {
                        this.$message.success('提交成功')
                        this.indexKey = 1
                        this.onSubmit()
                    })
                    .catch()
                } else {
                    return false
                }
            })
        },
        // 提交
        studentSubmit() {
            var data = this.studentTopicForm
            data.proId = data.id;
            data.id = this.topicData.id;
            if(this.studentTopicFormHis.id){
              this.studentTopicFormHis.proId=this.studentTopicFormHis.id;
            }
            var submitData = {
                applicationStudentHis: data,
                applicationStudentEntity:this.studentTopicFormHis
            };
            this.$refs['studentTopicForm'].validate(valid => {
                if (valid) {
                    addData(submitData)
                        .then(res => {
                            this.$message.success('提交成功')
                            this.indexKey = 1
                            this.onSubmit()
                        })
                        .catch()
                } else {
                    return false
                }
            })
        },
        // 取消
        declareCancel() {
            this.indexKey = '1'
            this.onSubmit()
        }
    },
    components: {
        TopicInfo: () => import('./components/topicInfo'),
        TopicTeacherDetail: () => import('./components/topicTeacherDetail'),
        TopicStuDetail: () => import('./components/topicStuDetail')
    }
}
</script>
